import DailyLine from '@/components/industry-data-component/daily-line'
import MonthlyLine from '@/components/industry-data-component/monthly-line'
import AnnualLine from '@/components/industry-data-component/annual-line'
import RankLists from '@/components/industry-data-component/rank-lists'
import {
  CHART_DAILY, CHART_MONTHLY, CHART_ANNUAL,
} from '@/utils/constant'
import { COMPREHENSIVE_CONSUMPTION } from '@/config'

export default {
  components: { RankLists },
  data () {
    const now = new Date()
    const year = now.getFullYear()
    return {
      type: '',

      chartType: CHART_DAILY,
      chartTypeOptions: [
        { name: '日度耗用', value: CHART_DAILY },
        { name: '月度耗用', value: CHART_MONTHLY },
        { name: '年累积耗用', value: CHART_ANNUAL },
      ],

      prevFullDate: this.$dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
      prevFullMonth: this.$dayjs().subtract(1, 'month').format('YYYY-MM'),
      year,
    }
  },
  computed: {
    prevDate () {
      const prevFullDate = this.prevFullDate
      return String(this.$dayjs(prevFullDate).get('date'))
    },
    prevMonth () {
      const prevFullMonth = this.prevFullMonth
      return String(this.$dayjs(prevFullMonth).get('month') + 1)
    },
    rankListsTitle () {
      const chartType = this.chartType
      const typeText = this.typeText
      const name = this.type === COMPREHENSIVE_CONSUMPTION ? '行业' : '企业'
      if (chartType === CHART_MONTHLY) {
        return `${this.prevMonth}月${name}${typeText}排行`
      }
      if (chartType === CHART_ANNUAL) {
        return `${this.year}年${name}${typeText}排行`
      }
      return ''
    },
    chartComponent () {
      const chartType = this.chartType
      if (chartType === CHART_DAILY) {
        return DailyLine
      }
      if (chartType === CHART_MONTHLY) {
        return MonthlyLine
      }
      if (chartType === CHART_ANNUAL) {
        return AnnualLine
      }
      return null
    },
    showPieArea () {
      return this.chartType !== CHART_DAILY
    },
  },
  watch: {
    $route () {
      this.chartType = this.$route.query.chartType
    },
  },
  created () {
    this.chartType = this.$route.query.chartType || this.chartType || CHART_DAILY
  },
  mounted () {
  },
  methods: {
    switchChartType (option) {
      const { name } = this.$route
      this.$router.push({
        name,
        query: {
          chartType: option.value
        }
      }).catch(() => {})
    },
    backToVisual () {
      this.$router.push({
        name: 'VisualIndustryData'
      }).catch(() => {})
    },
  },
}
